<template>
  <aside class="sidebar">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <div class="user-avatar">
          <img :src="userAvatar" alt="用户头像">
        </div>
        <div class="user-details">
          <h3 class="username">{{ username }}</h3>
          <p class="user-bio">{{ userBio || '暂无简介' }}</p>
        </div>
      </div>
      <div class="user-stats">
        <div class="stat-item">
          <span class="stat-count">{{ postsCount }}</span>
          <span class="stat-label">帖子</span>
        </div>
        <div class="stat-item">
          <span class="stat-count">{{ followingCount }}</span>
          <span class="stat-label">关注</span>
        </div>
        <div class="stat-item">
          <span class="stat-count">{{ followersCount }}</span>
          <span class="stat-label">粉丝</span>
        </div>
      </div>
    </div>
    
    <!-- 推荐用户 -->
    <div class="recommended-users">
      <h3 class="section-title">推荐关注</h3>
      <div class="user-list">
        <div 
          v-for="(user, index) in recommendedUsers" 
          :key="index" 
          class="recommended-user"
        >
          <div class="user-avatar">
            <img :src="user.avatar" alt="推荐用户头像">
          </div>
          <div class="user-info">
            <h4 class="username">{{ user.username }}</h4>
            <p class="user-bio">{{ user.bio || '' }}</p>
          </div>
          <button 
            class="follow-btn" 
            :class="{ followed: user.isFollowed }"
            @click="toggleFollow(user.id)"
          >
            {{ user.isFollowed ? '已关注' : '关注' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 热门话题 -->
    <div class="trending-topics">
      <h3 class="section-title">热门话题</h3>
      <div class="topic-list">
        <div 
          v-for="(topic, index) in trendingTopics" 
          :key="index" 
          class="topic-item"
          @click="navigateToTopic(topic.name)"
        >
          <span class="topic-name">#{{ topic.name }}</span>
          <span class="topic-count">{{ topic.count }} 讨论</span>
        </div>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { useUserStore } from '@/store/modules/user';

const authStore = useAuthStore();
const userStore = useUserStore();

// 用户信息（从 store 获取）
const userAvatar = computed(() => authStore.currentUser?.avatar || 'https://via.placeholder.com/60');
const username = computed(() => authStore.currentUser?.username || '用户');
const userBio = computed(() => authStore.currentUser?.bio || '');
const postsCount = computed(() => authStore.currentUser?.postsCount || 0);
const followingCount = computed(() => authStore.currentUser?.followingCount || 0);
const followersCount = computed(() => authStore.currentUser?.followersCount || 0);

// 推荐用户（模拟数据）
const recommendedUsers = ref([
  { 
    id: 101, 
    username: '摄影达人', 
    avatar: 'https://via.placeholder.com/40/FF6B6B', 
    bio: '记录生活中的美好瞬间', 
    isFollowed: false 
  },
  { 
    id: 102, 
    username: '美食家', 
    avatar: 'https://via.placeholder.com/40/4ECDC4', 
    bio: '分享各地美食攻略', 
    isFollowed: false 
  },
  { 
    id: 103, 
    username: '旅行博主', 
    avatar: 'https://via.placeholder.com/40/FFD166', 
    bio: '带你看世界的每一个角落', 
    isFollowed: false 
  }
]);

// 热门话题（模拟数据）
const trendingTopics = ref([
  { name: '夏日旅行', count: 12543 },
  { name: '美食分享', count: 9876 },
  { name: '摄影技巧', count: 8765 },
  { name: '读书心得', count: 7654 },
  { name: '健身打卡', count: 6543 }
]);

// 切换关注状态
const toggleFollow = (userId) => {
  const user = recommendedUsers.value.find(u => u.id === userId);
  if (user) {
    user.isFollowed = !user.isFollowed;
    // 实际项目中调用 store 方法
    // userStore.toggleFollow(userId);
  }
};

// 导航到话题页面
const navigateToTopic = (topicName) => {
  // 实际项目中跳转到话题页面
  console.log('导航到话题:', topicName);
  // router.push(`/topics/${topicName}`);
};
</script>

<style scoped>
.sidebar {
  width: 280px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 80px;
}

.user-card {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.user-info {
  display: flex;
  margin-bottom: 15px;
}

.user-avatar {
  margin-right: 15px;
}

.user-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #333;
}

.user-details p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.user-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-count {
  display: block;
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.recommended-users, .trending-topics {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.user-list, .topic-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommended-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recommended-user .user-avatar img {
  width: 40px;
  height: 40px;
}

.user-info h4 {
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
}

.user-info p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.follow-btn {
  padding: 6px 12px;
  border: 1px solid #007bff;
  border-radius: 4px;
  background-color: #fff;
  color: #007bff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.follow-btn.followed {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.topic-name {
  font-weight: 500;
  color: #333;
}

.topic-count {
  font-size: 12px;
  color: #999;
}
</style>